<%@include  file="/WEB-INF/header2.jsp"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>说说</title>
<style>
* {
	margin: 0px;
	padding: 0px;
}

#qq {
	width: 840px; /*宽*/
	height: 170px; /*高*/
	background: #fff; /*背景颜色*/
	margin: 0px auto 30px;
	border-radius: 5px; /*Html5 圆角*/
}

#qq p {
	font-size: 12px;
	color: #666;
	font-family: "微软雅黑";
	line-height: 45px;
	text-indent: 20px;
}

#qq .message {
	width: 760px;
	height: 70px;
	margin: 0px auto;
	outline: none;
	border: 1px solid #ddd; /*粗细 风格 颜色*/
	overflow:auto
}

#qq .But {
	width: 760px;
	height: 35px;
	margin: 15px auto 0px;
	position: relative; /*相对，参考对象*/
}

#qq .But img.bq {
	float: left; /*左浮动*/
}

#qq .But span .submit {
	width: 80px;
	height: 30px;
	background: #ff8140;
	display: block;
	float: right; /*右浮动*/
	line-height: 30px;
	border-radius: 5px;
	cursor: pointer; /*手指*/
	color: #fff;
	font-size: 12px;
	text-align: center;
	font-family: "微软雅黑";
}

/*face begin*/
#qq .But .face {
	width: 390px;
	height: 160px;
	background: #fff;
	padding: 10px;
	border: 1px solid #ddd;
	box-shadow: 2px 2px 3px #666;
	position: absolute; /*绝对定位*/
	top: 21px;
	left: 15px;
	display: none; /*隐藏*/
}

#qq .But .face ul li {
	width: 22px;
	height: 22px;
	list-style-type: none; /*去掉圆点*/
	float: left;
	margin: 2px;
	cursor: pointer;
}

/*msgCon begin*/
.msgCon {
	width: 840px;
	height: 500px;
	margin: 0px auto;
}

.msgCon .msgBox {
	background: #fff;
	padding: 10px;
	margin-top: 20px;
}

.msgCon .msgBox dl {
	height: 60px;
	border-bottom: 1px dotted #ddd;
}

.msgCon .msgBox dl dt {
	width: 50px;
	height: 50px;
	float: left;
}

.msgCon .msgBox dl dt img {
	border-radius: 25px;
}

.msgCon .msgBox dl dd {
	width: 720px;
	height: 50px;
	line-height: 50px;
	float: right;
	font-size: 16px;
	font-family: "微软雅黑";
}

.msgCon .msgBox .msgTxt {
	font-size: 12px;
	color: #666;
	line-height: 25px;
}

      .test1{
			width: 800px;
			margin: 50px auto;
		}
		
		
		.test2{
			position: absolute;
			top: 340px;
			text-align: center;
		}
		
		
		.test2 li{
			width: 30px;
			height: 5px;
			border: 1px solid transparent;
			background-color: #717171;
			border-radius: 2px;
			
		}
		
		.test2 .active{
			width: 30px;
			height: 5px;
			border: 1px solid transparent;
			background-color:#fff;
			border-radius: 2px;
		
		}

			 #a td{
                line-height: 50px;
                font-size: 20px;
            }

            #a tr:hover{
                background:#D4E3E5;
            }
            table th,td {
    vertical-align: middle!important;
    text-align: center;
}
            

</style>
</head>
<body>
<div id="page-wrapper">
<span id="inforback"></span>
	<div id="qq">
		<form method="post" action="${pageContext.request.contextPath }/addCircle.action">
			<h3 style="margin-left: 35px;color: #5b7da3;">解决不开心</h3>
			<div class="message" contentEditable='true'></div>
			<textarea hidden class="circle_dynamic" name="circle_dynamic"
				required="required"></textarea>
			<input type="hidden" name="user_id" value="${USER_SESSION.user_id}"></input>
			<input type="hidden" name="circle_photo" value="../img/circle/18.jpeg"></input>
			<div class="But">
				<img src="../img/images/bba_thumb.gif" class='bq' /> <span>发表 <input
					type="submit" class="submit">
				</span>
				<!--face begin-->
				<div class="face">
					<ul>
						<li><img src="../img/images/zz2_thumb.gif" title="[织]"></li>
						<li><img src="../img/images/horse2_thumb.gif" title="神马]"></li>
						<li><img src="../img/images/fuyun_thumb.gif" title="[浮云]"></li>
						<li><img src="../img/images/geili_thumb.gif" title="[给力]"></li>
						<li><img src="../img/images/wg_thumb.gif" title="[围观]"></li>
						<li><img src="../img/images/vw_thumb.gif" title="[威武]"></li>
						<li><img src="../img/images/panda_thumb.gif" title="[熊猫]"></li>
						<li><img src="../img/images/rabbit_thumb.gif" title="兔子]"></li>
						<li><img src="../img/images/otm_thumb.gif" title="[奥特曼]"></li>
						<li><img src="../img/images/j_thumb.gif" title="[囧]"></li>
						<li><img src="../img/images/hufen_thumb.gif" title="[互粉]"></li>
						<li><img src="../img/images/liwu_thumb.gif" title="[礼物]"></li>
						<li><img src="../img/images/smilea_thumb.gif" title="呵呵]"></li>
						<li><img src="../img/images/tootha_thumb.gif" title="嘻嘻]"></li>
						<li><img src="../img/images/laugh.gif" title="[哈哈]"></li>
						<li><img src="../img/images/tza_thumb.gif" title="[可爱]"></li>
						<li><img src="../img/images/kl_thumb.gif" title="[可怜]"></li>
						<li><img src="../img/images/kbsa_thumb.gif" title="[挖鼻屎]"></li>
						<li><img src="../img/images/cj_thumb.gif" title="[吃惊]"></li>
						<li><img src="../img/images/shamea_thumb.gif" title="[害羞]"></li>
						<li><img src="../img/images/zy_thumb.gif" title="[挤眼]"></li>
						<li><img src="../img/images/bz_thumb.gif" title="[闭嘴]"></li>
						<li><img src="../img/images/bs2_thumb.gif" title="[鄙视]"></li>
						<li><img src="../img/images/lovea_thumb.gif" title="[爱你]"></li>
						<li><img src="../img/images/sada_thumb.gif" title="[泪]"></li>
						<li><img src="../img/images/heia_thumb.gif" title="[偷笑]"></li>
						<li><img src="../img/images/qq_thumb.gif" title="[亲亲]"></li>
						<li><img src="../img/images/sb_thumb.gif" title="[生病]"></li>
						<li><img src="../img/images/mb_thumb.gif" title="[太开心]"></li>
						<li><img src="../img/images/ldln_thumb.gif" title="[懒得理你]"></li>
						<li><img src="../img/images/yhh_thumb.gif" title="[右哼哼]"></li>
						<li><img src="../img/images/zhh_thumb.gif" title="[左哼哼]"></li>
						<li><img src="../img/images/x_thumb.gif" title="[嘘]"></li>
						<li><img src="../img/images/cry.gif" title="[衰]"></li>
						<li><img src="../img/images/wq_thumb.gif" title="[委屈]"></li>
						<li><img src="../img/images/t_thumb.gif" title="[吐]"></li>
						<li><img src="../img/images/k_thumb.gif" title="[打哈气]"></li>
						<li><img src="../img/images/bba_thumb.gif" title="[抱抱]"></li>
						<li><img src="../img/images/angrya_thumb.gif" title="[怒]"></li>
						<li><img src="../img/images/yw_thumb.gif" title="[疑问]"></li>
						<li><img src="../img/images/cza_thumb.gif" title="[馋嘴]"></li>
						<li><img src="../img/images/88_thumb.gif" title="[拜拜]"></li>
						<li><img src="../img/images/sk_thumb.gif" title="[思考]"></li>
						<li><img src="../img/images/sweata_thumb.gif" title="[汗]"></li>
						<li><img src="../img/images/sleepya_thumb.gif" title="[困]"></li>
						<li><img src="../img/images/sleepa_thumb.gif" title="[睡觉]"></li>
						<li><img src="../img/images/money_thumb.gif" title="[钱]"></li>
						<li><img src="../img/images/sw_thumb.gif" title="[失望]"></li>
						<li><img src="../img/images/cool_thumb.gif" title="[酷]"></li>
						<li><img src="../img/images/hsa_thumb.gif" title="[花心]"></li>
						<li><img src="../img/images/hatea_thumb.gif" title="[哼]"></li>
						<li><img src="../img/images/gza_thumb.gif" title="[鼓掌]"></li>
						<li><img src="../img/images/dizzya_thumb.gif" title="[晕]"></li>
						<li><img src="../img/images/bs_thumb.gif" title="[悲伤]"></li>
						<li><img src="../img/images/crazya_thumb.gif" title="[抓狂]"></li>
						<li><img src="../img/images/h_thumb.gif" title="[黑线]"></li>
						<li><img src="../img/images/yx_thumb.gif" title="[阴险]"></li>
						<li><img src="../img/images/nm_thumb.gif" title="[怒骂]"></li>
						<li><img src="../img/images/hearta_thumb.gif" title="[心]"></li>
						<li><img src="../img/images/unheart.gif" title="[伤心]"></li>
						<li><img src="../img/images/pig.gif" title="[猪头]"></li>
						<li><img src="../img/images/ok_thumb.gif" title="[ok]"></li>
						<li><img src="../img/images/ye_thumb.gif" title="[耶]"></li>
						<li><img src="../img/images/good_thumb.gif" title="[good]"></li>
						<li><img src="../img/images/no_thumb.gif" title="[不要]"></li>
						<li><img src="../img/images/z2_thumb.gif" title="[赞]"></li>
						<li><img src="../img/images/come_thumb.gif" title="[来]"></li>
						<li><img src="../img/images/sad_thumb.gif" title="[弱]"></li>
						<li><img src="../img/images/lazu_thumb.gif" title="[蜡烛]"></li>
						<li><img src="../img/images/clock_thumb.gif" title="[钟]"></li>
						<li><img src="../img/images/cake.gif" title="[蛋糕]"></li>
						<li><img src="../img/images/m_thumb.gif" title="[话筒]"></li>
						<li><img src="../img/images/weijin_thumb.gif" title="[围脖]"></li>
						<li><img src="../img/images/lxhzhuanfa_thumb.gif" title="[转发]"></li>
						<li><img src="../img/images/lxhluguo_thumb.gif" title="[路过这儿]"></li>
						<li><img src="../img/images/bofubianlian_thumb.gif"
							title="[bofu变脸]"></li>
						<li><img src="../img/images/gbzkun_thumb.gif" title="[gbz困]"></li>
						<li><img src="../img/images/boboshengmenqi_thumb.gif"
							title="[生闷气]"></li>
						<li><img src="../img/images/chn_buyaoya_thumb.gif" title="[不要啊]"></li>
						<li><img src="../img/images/daxiongleibenxiong_thumb.gif"
							title="[dx泪奔]"></li>
						<li><img src="../img/images/cat_yunqizhong_thumb.gif"
							title="[运气中]"></li>
						<li><img src="../img/images/youqian_thumb.gif" title="[有钱]"></li>
						<li><img src="../img/images/cf_thumb.gif" title="[冲锋]"></li>
						<li><img src="../img/images/camera_thumb.gif" title="[照相机]"></li>
					</ul>
				</div>
				<!--face end-->
			</div>
		</form>
	</div>
	
	<div class="container">
		<table id="table_page" class="table table-hover table-bordered" >
			<tr><th>序号</th><th>用户头像</th><th>说说内容</th><th>发布时间</th><th>用户名</th></tr>
			<c:forEach items="${circle}" var="circle" varStatus="status">
			<tr>
				<td>${status.count }</td>
				<td><img class="img-circle" data-toggle="modal" data-target="#myModal2" style="width: 122px;height:122px;" src="${circle.circle_photo }"></td>
				<td>${circle.circle_dynamic }</td>
				<td>${circle.circle_time }</td>
				<td>${USER_SESSION.username}</td>
			</tr>
			</c:forEach>
		</table>
	</div>
</div>
	<script type="text/javascript" src="../js/jquery.js"></script>
	<script type="text/javascript">

	$(function(){
		
		//点击小图片，显示表情
		$(".bq").click(function(e) {
			$(".face").slideDown();//慢慢向下展开
			e.stopPropagation(); //阻止冒泡事件
		});

		//在桌面任意地方点击，他是关闭
		$(document).click(function() {
			$(".face").slideUp();//慢慢向上收
		});

		//点击小图标时，添加功能
		$(".face ul li").click(function() {
			var simg = $(this).find("img").clone();
			$(".message").append(simg);
		});
		//点击提交按钮把div中的值复制给textarea控件
		$(".submit").click(function() {
			var txt = $(".message").html();
			if (txt == "") {
				$('.message').focus();//自动获取焦点
				return;
			}
			$(".circle_dynamic").html(txt);
		});
	});
	function operaconfirm(op) {
		question = confirm("你确定要"+op+"么？"); 
		 	if (question != "0") {
			return true;
		}
		return false;  
	}
</script>
</body>
</html>
 <%@include  file="/WEB-INF/footer.jsp"%>